<template>
  <div>
    <van-nav-bar
      title="评价"
      left-text=""
      left-arrow
      @click-left="onClickLeft('/')" />
    <van-field name="rate">
      <template #input>
        <van-image width="10rem" height="10rem" :src="stord.storeimage" />
        <p>{{ stord.storeName }}</p>
      </template>
    </van-field>

    <van-field name="rate" label="商品评价">
      <template #input>
        <van-rate v-model="form.starlevel" />
      </template>
    </van-field>

    <van-field
      v-model="form.evaluate"
      rows="3"
      autosize
      label=""
      type="textarea"
      placeholder="请输入您对门店的评价" />

    <van-field label="添加照片" placeholder="最多可添加1张" />

    <van-field name="uploader">
      <template #input>
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="1"
          :after-read="afterRead"
          preview-size="90px"
          ref="file" />
      </template>
    </van-field>

    <van-field name="checkbox">
      <template #input>
        <van-checkbox v-model="checkbox">匿名评价</van-checkbox>
      </template>
    </van-field>

    <van-button round class="btn" type="submit" @click="addOrUpdate"
      >提交</van-button
    >
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      rate: 3,
      fileList: [],

      form: {
        evaluate: "",
        starlevel: "",
        image: "",
        userid: "",
        outletid: this.$route.query.storeId,
        evaluatetime: '',
        isimage: "0",
        goodid: this.$route.query.goodsId,
      },
      stord: {},
      checkbox: false,
    };
  },
  created() {
    //查询门店
    var _this = this;
    console.log("。。。。。");
    this.$http
      .get("/tbStore/queryById?id=" + this.$route.query.storeId)
      .then(function (response) {
        console.log(JSON.stringify(response));
        if (response.data.code == 200) {
          _this.stord = response.data.data[0];
        }
      })
      .catch(function (error) {
        _this.$toast("获取用户id出错。。。");
      });
    //根据token查询当前登录用户信息
    console.log("根据token查询当前登录用户信息。。。。。");
    this.$http
      .get("/tuser/queryBy")
      .then(function (response) {
        console.log(JSON.stringify(response));
        if (response.data.code == 200) {
          _this.form.userid = response.data.data.id; //获取用户id
        }
      })
      .catch(function (error) {
        _this.$toast("获取用户id出错。。。");
      });

    const comId = this.$route.query.good;
    if (comId != null) {
      this.form.goodid = comId;
    }
  },
  methods: {
    afterRead(file1) {
      // 此时可以自行将文件上传至服务器
      console.log(file1);
      //在这块创建FormData对象
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      //上传图片需要转换二进制这里要用到FormData
      const forms = new FormData();
      //这里的file1表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append("file1", file1.file); // 获取上传图片信息
      //向后端发送相应的请求
      //这块的url是具体的交互接口
      //headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，
      //token根据实际情况自行添加
      axios
        .post("/user/uploadFile", forms, {
          headers: {
            "content-type": "multipart/form-data",
            token: this.token,
          },
        })
        .then((res) => {
          //如果传入的响应状态码为200，则成功将文件发送给后台
          if (res.data.code === 200) {
            this.form.image = res.data.data.filePath;
            this.form.isimage = "1";
          } else {
            console.log(res.data.msg); //这块是请求失败后台给返回的相应的数据
          }
        });
    },
    //实现用户添加或者更新
    addOrUpdate() {
      if (this.checkbox == true) {
        this.form.userid = "";
      }
      var _this = this;
      this.$http
        .post("/tbGoodsComment/add", this.form)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.$message({
              message: "提交成功",
              type: "success",
            });
            //原始js重新请求
            setTimeout(function () {
              _this.onClickLeft("/");
            }, 1000); // 定时时间
          } else {
            _this.$message("操作失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    onClickLeft(uri) {
      this.$router.push(
        uri,
        () => {},
        () => {}
      );
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>
<style>
p {
  margin: 0px;
  margin-bottom: 136px;
  margin-left: 10px;
}

.van-cell__title,
.van-cell__value {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: left;
}

.van-cell__value {
  position: relative;
  overflow: hidden;
  color: #969799;
  vertical-align: middle;
  word-wrap: break-word;
  text-align: left;
}

.van-field__label {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  box-sizing: border-box;
  width: 6.2em;
  margin-right: 12px;
  color: #646566;
  text-align: left;
  word-wrap: break-word;
  font-weight: 700;
}

.btn {
  width: 92%;
  color: white;
  font-size: 16px;
  background-color: rgb(1, 159, 232);
  border: 0px;
  margin-top: 100px;
}
</style>
